<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="40.75rem">
      <el-table-column label="ID" width="100">
        <template slot-scope="scope">
          <i class="el-icon-lollipop"></i>
          <span style="margin-left: 10px">{{ scope.row.uid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="130">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="220">
        <template slot-scope="scope">
          <i class="el-icon-alarm-clock"></i>
          <span style="margin-left: 10px">{{ scope.row.created }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <i class="el-icon-message"></i>
          <span style="margin-left: 10px">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.uid)"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="aaa(scope.row)"
            >添加</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
      <!-- 姓名 -->
        <el-form-item label="账户名" prop="username">
          <el-input
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="ruleForm.eemail"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      <!-- 手机号码 -->
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
          <!-- 年龄 -->
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { userData } from "@/api";
import { Delete } from "@/api";
import {addUser} from "@/api"
export default {
  async created() {
    let { data } = await userData();
    console.log(data.result);
    this.tableData = data.result;
    console.log(this.tableData);
  },
  data() {
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
       var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var subscriBer = (rule, value, callback) => {
        if (value==='') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };

    return {
      tableData: [],
      drawer: false,
      direction: "rtl",
      ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          username:'',
          email:'',
          phone:''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          user:[
            { validator: subscriBer, trigger: 'blur' }
          ]
        }

    };


    
     
  },
  methods: {
    handleDelete(a) {
      this.$confirm("确认删除？")
        .then(async() => {
          console.log("确认删除？");
          let { data } = await Delete({ uid: a });
      console.log(data);
      this.$router.go(0);
        })
        .catch((_) => {});
      
      
    },
    aaa() {
      console.log(123);
      this.drawer = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          console.log("确认关闭？");
          done();
        })
        .catch((_) => {});
    },
     submitForm(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            alert('提交成功!');

            let {data}=await addUser(
              {username:this.ruleForm.username,password:this.ruleForm.checkPass,email:this.ruleForm.email,phone:this.ruleForm.phone}
              )
              console.log(data);
              this.$router.go(0)

          } else {
            console.log('提交失败');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style lang="less">
.el-table {
  text-align: center;
  img {
    width: 3.125rem;
  }
}
</style>
